<template>
  <div class="order">
    <a-card title="资源类别管理">
      <div class="order-table">
        <vxe-table
          ref="tableRef"
          :data="tableList"
          size="mini"
          show-footer
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          :menu-config="menuConfig"
          stripe
          border
          height="100%"
          @menu-click="contextMenuBodyClickEvent"
        >
          <vxe-column title="资源类别编号" align="center" width="200">
            <template #default="{ row }"> {{ row.resourceTypeNO }}</template>
          </vxe-column>
          <vxe-column title="资源类别名称" align="center" width="200">
            <template #default="{ row }"> {{ row.resourceTypeName }}</template>
          </vxe-column>
          <vxe-column title="操作" align="center" width="300" fixed="right">
            <template #default="{ row }">
              <a-space>
                <a-button type="primary" size="mini" @click="viewDetails(row)">
                  <template #default>编辑</template>
                </a-button>
                <a-button type="primary" status="danger" size="mini" @click="viewDetails(row)">
                  <template #default>删除</template>
                </a-button>
              </a-space>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </a-card>
    <a-modal v-model:visible="visible" width="1400px" @ok="visible = false" @cancel="visible = false">
      <template #title> 详情查看 </template>
      <div>
        <a-descriptions v-if="visible" :data="desData" bordered />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, toRefs } from 'vue';
import importConfig from './resourceCategoryManagement';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import { EFTimeFormatConversion } from '@/utils/baseMethods';
import { multiplication } from '@/utils/calculationFormula';

export default defineComponent({
  name: 'OrderDom',
  components: { formButtonGroup },
  setup() {
    const { base, menuConfig, handlePageChange, contextMenuBodyClickEvent, viewDetails, getTable } = importConfig();

    return {
      ...toRefs(base),
      menuConfig,
      handlePageChange,
      contextMenuBodyClickEvent,
      viewDetails,
      getTable,
      EFTimeFormatConversion,
      multiplication,
    };
  },
});
</script>

<style lang="less" scoped>
.order {
  &-table {
    height: calc(100vh - 216px);
  }

  :deep(.arco-card-header) {
    border-bottom: none;
  }

  :deep(.arco-card-header-title) {
    text-align: left;
  }
}
</style>
